<template>
  <div>
    <div class="operation">
      <slot name="operation"></slot>
    </div>

    <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @selection-change="handleSelectChange" :span-method="spanMethod">
      <table-column v-if="checkbox" type="selection" width="48" />
      <slot></slot>
    </el-table>
    <div class="table-footer">
      <el-row type="flex" align="center">
        <el-col :span="10" class="table-footer-operation">
          <div class="operation-bottom">
            <slot name="footer"></slot>
          </div>
        </el-col>
        <el-col :span="14" class="pager" v-if="tableData && tableData.length">
          <el-pagination
            background
            :small="small"
            :current-page="queryParams.page.index"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="queryParams.page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PostList } from '@/api/common'
import { ref, onMounted } from 'vue'

  const props = defineProps({
    url: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
      default: () => {}
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    pager: {
        type: Boolean,
        default: false
    },
    orderbyName: {
        type: String,
        default: 'Id'
    },
    isAsc: {
        type: Boolean,
        default: false
    },
    beginDateTime: {
        type: Date,
        default: undefined
    },
    endDateTime: {
        type: Date,
        default: undefined
    },
    spanMethod: {
      type: Function,
      default: function () { }
    },
  })
  const small = ref<boolean>(true)
  const tableData = ref<any>([])
  const total = ref<number>(0)
  const queryParams = ref<PageModel<any>>({
      orderbyName: props.orderbyName,
      isAsc: props.isAsc,
      beginDateTime: props.orderbyName,
      endDateTime: props.orderbyName,
      entity: {},
      page: {
        index: 1,
        size: 10
      }
    })
  const load =():void => {
    queryParams.value.entity = props.params
    queryParams.value.beginDateTime = props.beginDateTime
    queryParams.value.endDateTime = props.endDateTime
    PostList(props.url, queryParams.value).then((res: any) => {
      tableData.value = res.data
      total.value = res.count
    })
  }
  const loadData = (): void => {
    queryParams.value.page.index = 1
    load()
  }
  const handleSizeChange = (size: number) => {
    queryParams.value.page.size = size
    load()
  }

  const handleCurrentChange = (index: number) => {
    queryParams.value.page.index = index
    load()
  }

  const handleSortChange = (data: any) => {
    if (data.order) {
      queryParams.value.orderbyName = data.prop
      queryParams.value.isAsc = data.order === 'ascending'
    } else {
      queryParams.value.orderbyName = props.orderbyName
      queryParams.value.isAsc = props.isAsc
    }
    queryParams.value.page.index = 1
    load()
  }
  const emit = defineEmits(['on-selectChange'])
  const handleSelectChange = (data: any) => {
    emit('on-selectChange', data)
  }
  onMounted(() => {
    load()
  })

  defineExpose({
    //暴露给父控件使用
    loadData
  })
</script>

<style lang="scss" scoped>
  .operation {
    display: flex;
    text-align: left;
    ::v-deep .el-button--small {
      margin: 0 0 16px;
      font-size: 14px;
      padding: 8px 16px;
    }
    .el-dropdown {
      margin: 0 0 16px 8px;
      ::v-deep .el-button {
        margin: 0;
      }
    }
    .el-button + .el-button {
      margin-left: 8px;
    }

    .el-select {
      margin: 16px 0 16px 8px;
      vertical-align: bottom;
    }
  }
  .operation-bottom {
    ::v-deep {
      .el-button--small {
        font-size: 14px;
      }
      .el-dropdown {
        margin-left: 8px;
      }
    }
    .el-button + .el-button {
      margin-left: 8px;
    }
    ::v-deep .el-select {
      display: inline-block;
      vertical-align: bottom;
      margin-left: 8px;
    }
  }
  .table-footer {
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .el-row {
      width: 100%;
    }
    .el-pagination {
      float: right;
    }
  }

  
.el-table ::v-deep {
  thead {
    color: #262626;
  }

  th {
    background-color: #fafafa;
    padding: 9px 0;
    font-weight: 400;
    height: 34px;

    .cell {
      height: 34px;
      line-height: 34px;
    }
  }

  td {
    border-bottom-color: #f5f5f5;
    overflow: visible;
    position: static;

    .cell {
      overflow: visible;
      word-break: break-word;
    }
  }
  .el-table__body tr:hover {
    .icon-edit {
      opacity: 1;
    }
  }
}
.el-table--enable-row-hover ::v-deep .el-table__body tr:hover > td {
  background: #eff7ff !important;
}
</style>
